<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .datepicker{
            border: 1px solid #cccccc;
            border-radius: 4px;
            padding: 5px;
            height: 24px;
            line-height: 24px;
            width: 230px;
        }
        .datepicker:focus{
            outline: 0 none;
            border: 1px solid #1abc9c;
        }
    </style>
</head>
<body>
    <input type="text" class="datepicker">
    <!--模板结构-->
    <!--<div class="ui-datepicker-wrapper">
        <div class="ui-datepicker-header">
            <a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>
            <a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>
            <span class="datepicker-curr-month">2017-12</span>
        </div>
        <div class="ui-datepicker-body">
            <table>
                <thead>
                    <tr>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                        <th>日</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>29</td>
                        <td>30</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>13</td>
                        <td>14</td>
                        <td>15</td>
                        <td>16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                    </tr>
                    <tr>
                        <td>20</td>
                        <td>21</td>
                        <td>22</td>
                        <td>23</td>
                        <td>24</td>
                        <td>25</td>
                        <td>26</td>
                    </tr>
                    <tr>
                        <td>27</td>
                        <td>28</td>
                        <td>29</td>
                        <td>30</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>-->
    <script src="date.js"></script>
    <script src="main.js"></script>
    <script>
        datePicker.init('.datepicker');
    </script>
</body>
</html>